import {Component, OnInit} from '@angular/core';
import {ToolItem, ToolMode, ToolType} from '../../entity/ToolItem';
import {EventMessage, EventService, EventSource} from '../../services/event.service';
import {PaletteColor, PaletteSize} from 'src/app/entity/PaletteColor';
import {CdkDragEnd, CdkDragMove, CdkDragStart} from '@angular/cdk/drag-drop';
import { ToolboxService } from 'src/app/services/toolbox.service';


@Component({
  selector: 'app-toolbox',
  templateUrl: './toolbox.component.html',
  styleUrls: ['./toolbox.component.scss']
})
export class ToolboxComponent implements OnInit {

  tools: ToolItem[];
  toggle = true;
  isMoving = false;
  selectedItem: ToolItem;

  constructor(
    private eventService: EventService,
    private toolboxService: ToolboxService)
    { 
      this.tools = this.toolboxService.getTools();


    this.eventService.subscribeEvent((evt: EventMessage) => {
      switch (evt.source) {
        case EventSource.TOGGLE_TOOLBOX_CHANGED:
          this.toggle = evt.data;
        break;

        case EventSource.TOOL_COLOR:
          const color: PaletteColor = evt.data;
          this.onSelectItem(color.item, false);
          break;

        case EventSource.TOOL_SIZE:
          const ps: PaletteSize = evt.data;
          this.onSelectItem(ps.item, false);
          break;

        
      }
    });

  }

  ngOnInit() {
    this.init();
  }

  init() {
    const item = this.getItem(ToolType.PEN);
    this.onSelectItem(item);

  }

  getItem(type: ToolType): ToolItem {
    return this.tools.find(e => e.type == type);
  }

  onSelectItem(item: ToolItem, send: boolean = true) {
    console.log('onSelectItem', item);
    
    switch (item.mode) {
      case ToolMode.SELECT:
        this.selectedItem = item;
        break;
      case ToolMode.PUSH:{
        item.isActive = !item.isActive;
        break;
      }
    }

    switch (item.type) {
      case ToolType.MOVE:
        this.eventService.sendEvent(EventSource.CURSOR, 'move')
        break;
      case ToolType.PEN:
        this.eventService.sendEvent(EventSource.CURSOR, 'crosshair')
        break;
      case ToolType.TEXT:
        this.eventService.sendEvent(EventSource.CURSOR, 'text')
        break;
      case ToolType.CUTTER:
        this.eventService.sendEvent(EventSource.CURSOR, 'wait')
        break;
      case ToolType.MUTE_VIDEO:
        this.eventService.sendEvent(EventSource.MUTE_VIDEO, item.isActive)
        break;
    }


    if (send) {
      this.eventService.sendEventMessage({
        source: EventSource.ToolItem,
        data: item
      });
    }
  }

  toggleShow() {
    if(!this.isMoving) {
      this.eventService.sendEvent(EventSource.TOGGLE_TOOLBOX, !this.toggle);
    }
  }

  dragStarted(event: CdkDragStart) {
    this.isMoving = true;
  }

  dragEnded(event: CdkDragEnd) {
    setTimeout(() => {
      this.isMoving = false;
    }, 400);
  }

  dragMoved(event: CdkDragMove) {
  }

}
